<template>
  <div class="box">
    <!-- 音频插件 -->
    <aplayer
      @play="handlePlay"
      @ended="handleEnded"
      :music="music"
      ref="aplayer"
    >
    </aplayer>
    <!-- <button @click="playA">按钮</button> -->
  </div>
</template>

<script>
// 引入音频插件
import aplayer from 'vue-aplayer'
export default {
  props: ['url', 'readyTime', 'answerTime', 'beforeRecordCountdown'],
  components: {
    aplayer // 音频组件
  },
  data () {
    return {
      times: 0,
      music: {
        src: this.getUrl()
        //src: 'https://www.0dutv.com/upload/dance/F25F74A0B8FF82503241801D0E2CA5CD.mp3'
      },
    }
  },
  watch: {
    readyTime () {
      if (this.readyTime == 0) {
        this.handlePlay()
      }
    }
  },
  methods: {
    getUrl () {
      if (this.url) {
        return this.url
      } else {
        return ""
      }
    },
    // 录音播放完后触发
    handleEnded () {
      console.log('录音播放结束');
      this.$emit('startRecord')
    },
    // 播放音频
    handlePlay () {

      this.$refs.aplayer.play()
      this.$emit('sendTime', 0)
      // console.log(this.$refs.aplayer);
    },
    checkStop () {
      // console.log("播放器点击暂停事件")
    }
  },
}
</script>
<style lang="less" scoped>
.aplayer {
  box-shadow: none;
  width: 66.75rem;
}
/deep/.aplayer-controller .aplayer-time .aplayer-volume-wrap + .aplayer-icon {
  display: none;
}
/deep/.aplayer-controller .aplayer-time .aplayer-icon.inactive {
  display: none;
}
/deep/.aplayer-pic {
  background-image: none;
}
/deep/.aplayer-bar-wrap .aplayer-bar {
  height: 0.375rem;
  background-color: #fff;
}
// 加载进度条
/deep/.aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
  height: 0.375rem;
  background: #ccc;
}
/deep/.aplayer .aplayer-body .aplayer-info .aplayer-music {
  display: none;
}
/deep/.aplayer-controller,
.aplayer-controller .aplayer-time {
  -webkit-margin-top-collapse: 1.25rem;
}
/deep/.aplayer .aplayer-body .aplayer-info {
  padding: 1.625rem 1.5625rem 0 0 !important;
}
/deep/.aplayer .aplayer-pic .aplayer-pause {
  left: 1.125rem;
  bottom: 1.125rem;
  width: 1.625rem;
  height: 1.625rem;
}
/deep/.aplayer-pic .aplayer-pause .aplayer-icon-pause {
  width: 1.25rem;
  height: 1.25rem;
}
/deep/.aplayer-pic .aplayer-pause .aplayer-icon-pause {
  top: 0.1875rem;
  left: 0.1875rem;
}
/deep/.aplayer .aplayer-body {
  background-color: #fffafa;
}
// 播放进度条
/deep/.aplayer-bar-wrap .aplayer-bar .aplayer-played {
  height: 0.375rem;
  background-color: #ff5e4e;
}
/deep/.aplayer-played {
  background-color: #ff5e4e !important;
}
// 隐藏进度条的小滑块
/deep/.aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
  width: 0;
  height: 0;
  border: none;
}
/deep/.aplayer-pic .aplayer-button {
  transition: none;
}
// 控制音量调的高度
/deep/.aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar {
  height: 1.5625rem;
}
</style>
